<!DOCTYPE html>

<html>

	<head>

		<!-- 页面字符编码 -->

		<meta charset="utf-8">

		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">

		<meta name="apple-mobile-web-app-capable" content="yes">

		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<title></title>

		<link href="../css/mui.min.css" rel="stylesheet" />

		<link href="../fonts/iconfont.css" rel="stylesheet" />

		<link href="../css/index.css" rel="stylesheet" />

	</head>

	<body>

		<div class="mui-content  index7-mui-content">

		    <div class="header7" id="header6" >
		   	    <div class="auto">
		   	   	    <i class="iconfont icon-caidan"></i>
		   	   	    <i class="iconfont"><img src="../images/face2.jpg" alt=""></i>
		   	   	    <div class="m-m">
		   	   	        <i class="iconfont icon-xiangqian"></i>
		   	   	    	<p class="feb">February<br><span>2015</span></p>
		   	   	    	<i class="iconfont icon-forward"></i>
		   	   	    </div>
		   	   	    <div class="jindu" >
						<canvas id="my_html1" width="60" height="60"></canvas>
						<canvas id="my_html2" width="100" height="100"></canvas>
						<canvas id="my_html3" width="60" height="60"></canvas>
		   	   	    </div>
		   	        <div class="completed">
		   	        	<p>Good job,you've completed 6%<br>more tasks this month</p>
		   	        </div>
		   	       
		   	        <div class="sanshuxian"><i class="iconfont icon-sanshuxian"></i></div>
		   	   	   
		   	    </div>
		   	    <div class="footer6">
	            	<div class="box box1">
	            		<div class="aaa">
	            			<span class="green-color zfx"></span>
	            			<p class="wenzi">Completed</p>
	            			<p class="shuzi">108</p>
	            		</div>
	            	</div>
	            	<div class="box">
	            		<div class="aaa">
	            			<span class="yellow-color zfx"></span>
	            			<p  class="wenzi">Snoozed</p>
	            			<p class="shuzi">56</p>
	            		</div>
	            	</div>
	            	<div class="box">
	            		<div class="aaa">
	            			<span class="pink-color zfx"></span>
	            			<p  class="wenzi">Overdue</p>
	            			<p  class="shuzi">36</p>
	            		</div>
	            	</div>
                </div>
            </div>

          
		</div>  	   


          


	</body>

</html>

<script type="text/javascript" src="../js/progress.js"></script>
<script>
    var p1 = new Progress({
        el:'my_html1',//canvas元素id
        deg:24,//绘制角度
        timer:10,//绘制时间
        lineWidth:3,//线宽
        lineBgColor:'#999',//底圆颜色
        lineColor:'#f9ab54',//动态圆颜色
        textColor:'#fff',//文本颜色
        fontSize:12,//字体大小
        circleRadius:30//圆半径
    });	
    var p2 = new Progress({
        el:'my_html2',//canvas元素id
        deg:54,//绘制角度
        timer:10,//绘制时间
        lineWidth:3,//线宽
        lineBgColor:'#999',//底圆颜色
        lineColor:'#4dd6c6',//动态圆颜色
        textColor:'#fff',//文本颜色
        fontSize:12,//字体大小
        circleRadius:50//圆半径
    });	
    var p3 = new Progress({
        el:'my_html3',//canvas元素id
        deg:18,//绘制角度
        timer:10,//绘制时间
        lineWidth:3,//线宽
        lineBgColor:'#999',//底圆颜色
        lineColor:'#ba77fd',//动态圆颜色
        textColor:'#fff',//文本颜色
        fontSize:12,//字体大小
        circleRadius:30//圆半径
    });	


</script>